<template>
  <div>
    <!-- 登录/注册 -->
    <transition name="appear">
      <div class="loginBoxBg" v-if="loginBoxFlag">
        <div class="loginBox" :class="{ loginBoxDark: darkFlag }">
          <i class="el-icon-close" @click="closeLoginBox()"></i>
          <!-- 图片遮罩 -->
          <div class="logoBox" :style="logoBoxStyle">
            <img
              src="../assets/img/bg0.jpg"
              alt=""
              width="450px"
              height="550px"
              :style="logoImgStyle"
            />
          </div>
          <!-- 登录页面 -->
          <div
            class="loginMain"
            :style="loginMainStyle"
            :class="{ loginMainDark: darkFlag }"
          >
            <p class="loginTitle">登录</p>
            <div class="loginInput">
              <p class="loginP">
                账号：
                <input type="text" v-model="loginUserName" />
              </p>
              <br /><br />
              <p class="loginP">
                密码：
                <input type="password" v-model="loginPassword" />
              </p>
            </div>
            <!-- 图片滑动验证 -->
            <Vcode :show="loginTestFlag" @success="loginTestOK" />
            <div class="loginSpan">
              <span>还没有账号？</span>
              <span
                style="color: rgb(255, 111, 0); cursor: pointer"
                @click="changeReg()"
                >点我注册!</span
              >
            </div>
            <button @click="loginSend()">登录</button>
          </div>
          <!-- 注册页面 -->
          <div
            class="regMain"
            :style="regMainStyle"
            :class="{ regMainDark: darkFlag }"
          >
            <p class="loginTitle">注册</p>
            <div class="loginInput">
              <p class="loginP">
                账号：
                <input
                  type="text"
                  v-model="regUserName"
                  placeholder="3到11个字符"
                />
              </p>
              <br />
              <br />
              <p class="loginP">
                密码：
                <input
                  type="password"
                  v-model="regPassword"
                  placeholder="至少8个字符、1个字母和1个数字"
                />
              </p>
              <br />
            </div>
            <!-- 图片滑动验证 -->
            <Vcode :show="regTestFlag" @success="regTestOK" />
            <div class="loginSpan">
              <span>已有账号？</span>
              <span
                style="color: rgb(255, 111, 0); cursor: pointer"
                @click="changeLogin()"
                >点我登录!</span
              >
            </div>
            <button @click="regSend()">注册</button>
          </div>
        </div>
      </div>
    </transition>
    <!-- 修改用户密码 -->
    <transition name="appear">
      <div class="loginBoxBg" v-if="userChangeBoxFlag">
        <div class="regMain userChangeBox" :class="{ regMainDark: darkFlag }">
          <i class="el-icon-close" @click="closeChangeBox()"></i>
          <p class="loginTitle">修改密码</p>
          <div class="loginInput">
            <p class="loginP">
              旧密码：
              <input type="password" v-model="oldPassword" />
            </p>
            <br />
            <br />
            <p class="loginP">
              新密码：
              <input
                type="password"
                v-model="newPassword"
                placeholder="至少8个字符、1个字母和1个数字"
              />
            </p>
            <br />
          </div>
          <button @click="userChangeSend()">确认修改</button>
          <button @click="userLogoutSend()" style="margin-left: 30px">
            账户登出
          </button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import bus from "../bus";
import Vcode from "vue-puzzle-vcode";
import axios from "axios";

export default {
  components: {
    Vcode,
  },
  data() {
    return {
      // darkFlag: false,
      // 登录及注册
      loginBoxFlag: false,
      logoBoxStyle: {
        left: "0px",
      },
      logoImgStyle: {
        borderRadius: "20px 0px 0px 20px",
      },
      loginMainStyle: {
        right: "0px",
        zIndex: 105,
        opacity: 1,
      },
      regMainStyle: {
        right: "0px",
        zIndex: 102,
        opacity: 0,
      },
      // 登录信息
      loginUserName: "",
      loginPassword: "",
      // 注册信息
      regUserName: "",
      regPassword: "",
      // regEmail: "",
      // 注册图片滑动验证
      regTestFlag: false,
      // 登录图片滑动验证
      loginTestFlag: false,
      // 修改用户信息
      userChangeBoxFlag: false,
      // 保存用户当前用户名及密码
      oldUserName: "",
      oldPassword: "",
      newPassword: "",
      // 用户id
      userid: "",
    };
  },
  // computed:{
  //   darkFlag(){
  //     return this.$store.state.darkFlag
  //   }
  // },
  methods: {
    // 关闭登录/注册窗口
    closeLoginBox() {
      this.loginBoxFlag = false;
      this.loginUserName = "";
      this.loginPassword = "";
      this.regUserName = "";
      this.regPassword = "";
      this.changeLogin();
    },
    // 切换到注册页面
    changeReg() {
      // 遮罩右移
      this.logoBoxStyle.left = "450px";
      this.logoImgStyle.borderRadius = "0px 20px 20px 0px";
      // login，reg同时左移 reg在上 显示  login在下 消失
      this.regMainStyle.right = "450px";
      this.regMainStyle.zIndex = 105;
      this.regMainStyle.opacity = 1;
      this.loginMainStyle.right = "450px";
      this.loginMainStyle.zIndex = 102;
      this.loginMainStyle.opacity = 0;
      this.loginUserName = "";
      this.loginPassword = "";
    },
    // 切换到登录页面
    changeLogin() {
      // 遮罩左移
      this.logoBoxStyle.left = "0px";
      this.logoImgStyle.borderRadius = "20px 0px 0px 20px";
      // login，reg同时右移 reg在下 消失  login在上 显示
      this.loginMainStyle.right = "0px";
      this.loginMainStyle.zIndex = 105;
      this.loginMainStyle.opacity = 1;
      this.regMainStyle.right = "0px";
      this.regMainStyle.zIndex = 102;
      this.regMainStyle.opacity = 0;
      this.loginUserName = "";
      this.loginPassword = "";
      this.regUserName = "";
      this.regPassword = "";
    },
    // 确认登录
    loginSend() {
      const userNameJudge = /[\u4e00-\u9fa5_a-zA-Z0-9_]{3,11}/;
      const passwordJudge = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
      if ((this.loginUserName == "") | (this.loginPassword == "")) {
        this.$message.error("输入不可为空！");
        return;
      }
      if (!userNameJudge.test(this.loginUserName)) {
        this.$message.error("请输入正确的用户名");
        return;
      }
      if (!passwordJudge.test(this.loginPassword)) {
        this.$message.error("密码格式输入错误");
        return;
      }
      // 开启图片验证弹窗
      this.loginTestFlag = true;
    },
    // 登录图片滑动验证
    loginTestOK() {
      this.loginTestFlag = false;
      axios
        .get(this.$baseUrl+"/login", {
          params: {
            username: this.loginUserName,
            password: this.loginPassword,
          },
        })
        .then((response) => {
          // 查询列表为空返回错误
          if (response.data.length == 0) {
            this.$message.error("用户名/密码错误，请重新输入！");
            return;
          }
          this.$message({
            message: "登录成功！",
            type: "success",
          });
          this.userid = response.data[0].id;
          this.oldUserName = this.loginUserName;
          // 登录成功后发送用户名到LinkBox.vue 将登录提示更改为修改用户信息
          bus.$emit("useridFlag", this.userid);
          bus.$emit("userNameFlag", this.loginUserName, true);
          window.localStorage.setItem("locid", JSON.stringify(this.userid));
          window.localStorage.setItem(
            "locname",
            JSON.stringify(this.loginUserName)
          );
          this.closeLoginBox();
          // 登录成功后清空输入信息
          this.loginUserName = "";
          this.loginPassword = "";
        })
        .catch(function () {
          this.$message.error("登录失败！");
          return;
        });
      //清空注册信息
      this.regUserName = "";
      this.regPassword = "";
    },
    // 确认注册
    regSend() {
      const userNameJudge = /[\u4e00-\u9fa5_a-zA-Z0-9_]{3,11}/;
      // 至少八个字符、一个字母和一个数字
      const passwordJudge = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
      if ((this.regUserName == "") | (this.regPassword == "")) {
        this.$message.error("输入不可为空！");
        return;
      }
      if (!userNameJudge.test(this.regUserName)) {
        this.$message.error("昵称在3到11个字符之间");
        return;
      }
      if (!passwordJudge.test(this.regPassword)) {
        this.$message.error("密码至少八个字符、一个字母和一个数字");
        return;
      }
      // 开启图片验证弹窗
      this.regTestFlag = true;
    },
    // 注册图片滑动验证
    regTestOK() {
      console.log(this.$baseUrl);
      this.regTestFlag = false;
      axios
        .get(this.$baseUrl+"/reg", {
          params: {
            username: this.regUserName,
            password: this.regPassword,
          },
        })
        .then(() => {
          this.$message({
            message: "注册成功！",
            type: "success",
          });
          this.changeLogin();
          // 注册成功后清空输入信息
          this.regUserName = "";
          this.regPassword = "";
        })
        .catch(() => {
          this.$message.error("该用户名已被注册，请更换用户名！");
          return;
        });
    },
    // 关闭编辑菜单
    closeChangeBox() {
      this.oldPassword = "";
      this.newPassword = "";
      this.userChangeBoxFlag = false;
    },
    // 修改用户信息请求发送
    userChangeSend() {
      // 至少八个字符、一个字母和一个数字
      const passwordJudge = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
      if ((this.oldPassword == "") | (this.newPassword == "")) {
        this.$message.error("输入不可为空！");
        return;
      }
      if (!passwordJudge.test(this.oldPassword)) {
        this.$message.error("密码至少八个字符、一个字母和一个数字");
        return;
      }
      if (!passwordJudge.test(this.newPassword)) {
        this.$message.error("密码至少八个字符、一个字母和一个数字");
        return;
      }
      axios
        .get(this.$baseUrl+"/login", {
          params: {
            username: this.loginUserName,
            password: this.oldPassword,
          },
        })
        .then((response) => {
          // 查询列表为空
          if (response.data.length == 0) {
            this.$message.error("旧密码输入错误，请重新输入！");
            this.oldPassword = "";
            return;
          } else {
            // 修改主体请求
            axios
              .get(this.$baseUrl+"/update", {
                params: {
                  username: this.loginUserName,
                  password: this.newPassword,
                },
              })
              .then(() => {
                this.$message({
                  message: "修改成功！",
                  type: "success",
                });
                // 关闭编辑菜单
                this.closeChangeBox();
              })
              .catch(function () {
                this.$message.error("修改失败！");
                this.oldPassword = "";
                this.newPassword = "";
                return;
              });
          }
        })
        .catch(function () {
          this.$message.error("旧密码输入错误，请重新输入！");
          this.oldPassword = "";
          return;
        });
    },
    // 用户登出请求
    userLogoutSend() {
      // 清空保存的数据
      this.oldUserName = "";
      this.oldPassword = "";
      this.newPassword = "";
      this.$message({
        message: "登出成功！",
        type: "success",
      });
      // 清空本地储存
      localStorage.clear("locid", "locname","firstLogin");
      bus.$emit("useridFlag", -99999);
      // 登出成功后清空用户名，将修改用户信息更改为登录提示  LinkBox.vue
      bus.$emit("userNameFlag", "登录", false);
      // 关闭编辑菜单
      this.userChangeBoxFlag = false;
    },
  },
  computed:{
    darkFlag(){
      return this.$store.state.darkFlag
    }
  },
  mounted() {
    // 导航栏登录弹窗flag接收
    bus.$on("loginFlag", (flag) => {
      this.loginBoxFlag = flag;
    });
    // 设置登录弹窗flag接收
    bus.$on("loginOnFlag", (flag) => {
      this.loginBoxFlag = flag;
    });
    // 夜间模式flag接收
    // bus.$on("darkFlag", (flag) => {
    //   this.darkFlag = flag;
    // });
    // 导航栏修改用户信息弹窗flag接收
    bus.$on("userChangeFlag", (flag) => {
      this.userChangeBoxFlag = flag;
    });
    // 设置修改用户信息弹窗flag接收
    bus.$on("changeOnFlag", (flag) => {
      this.userChangeBoxFlag = flag;
    });
    let locid = JSON.parse(window.localStorage.getItem("locid"));
    let locname = JSON.parse(window.localStorage.getItem("locname"));
    if (locid) {
      this.userid = locid;
      this.loginUserName = locname;
      bus.$emit("useridFlag", this.userid);
      bus.$emit("userNameFlag", this.loginUserName, true);
    }
  },
  beforeDestroy() {
    bus.$off();
  },
};
</script>

<style>
/* 取消img错误显示 */
img[src=""],
img:not([src]) {
  opacity: 0;
}
.loginBoxBg {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgb(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 主体盒子 */
.loginBox {
  width: 900px;
  height: 550px;
  background-color: #fff;
  z-index: 100;
  position: relative;
  border-radius: 20px;
  color: black;
  text-align: center;
  box-shadow: 0 0 5px 5px rgba(119, 119, 119, 0.2);
}
.loginBoxDark {
  background-color: rgba(48, 48, 48);
  color: #fff;
}
.loginBox h1 {
  margin-top: 20px;
}
.loginBox i {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 26px;
  transition: all 0.2s;
  z-index: 120;
  cursor: pointer;
}
/* 图片遮罩 */
.logoBox {
  width: 450px;
  height: 550px;
  position: absolute;
  transition: all 0.4s;
  z-index: 110;
}
.logoBox img {
  transform-origin: center;
  object-fit: cover;
}
.loginBox i:hover {
  color: red;
}
/* 登录主体 */
.loginMain {
  width: 450px;
  height: 550px;
  border-radius: 0px 20px 20px 0px;
  position: absolute;
  top: 0;
  right: 0;
  font-family: YouYuan;
  z-index: 105;
  transition: all 0.4s;
}
.loginTitle {
  font-size: 40px;
  margin-top: 90px;
  font-family: YouYuan;
}
.loginInput {
  margin-top: 70px;
}
.loginInput input {
  width: 200px;
  height: 30px;
  padding: 5px 8px 0 8px;
  font-size: 20px;
  font-family: YuanTi;
  border-bottom: rgb(0, 0, 0) 1px solid;
  transition: all 0.2s;
}
.loginInput input::placeholder {
  font-size: 12px;
}
.loginP {
  font-size: 20px;
  text-align: left;
  margin-left: 70px;
}
.loginSpan {
  font-size: 16px;
  font-family: YuanTi;
  margin-top: 40px;
}
.loginMain button {
  width: 150px;
  height: 50px;
  font-size: 24px;
  border-radius: 30px;
  margin-top: 40px;
  background-color: rgb(254, 199, 31);
  transition: all 0.2s;
  cursor: pointer;
}
.loginMain button:hover {
  background-color: rgb(255, 174, 0);
}
/* 夜间模式 */
.loginMainDark {
  background-color: rgba(48, 48, 48);
  color: #fff;
}
.loginMainDark input {
  color: #fff;
  background-color: rgba(48, 48, 48);
  border-bottom: rgb(255, 255, 255) 1px solid;
}
/* 注册页面 */
.regMain {
  width: 450px;
  height: 550px;
  border-radius: 20px 0px 0px 20px;
  position: absolute;
  font-family: YouYuan;
  z-index: 102;
  transition: all 0.4s;
}

.regMain button {
  width: 150px;
  height: 50px;
  font-size: 24px;
  border-radius: 30px;
  margin-top: 40px;
  background-color: rgb(254, 199, 31);
}
/* 夜间模式 */
.regMainDark {
  background-color: rgba(48, 48, 48) !important;
  color: #fff;
}
.regMainDark input {
  color: #fff;
  background-color: rgba(48, 48, 48);
  border-bottom: rgb(255, 255, 255) 1px solid;
}
/* 修改用户信息 */
.userChangeBox {
  width: 450px;
  height: 500px;
  border-radius: 20px;
  background-color: #fff;
  position: relative;
  font-family: YouYuan;
  z-index: 110;
  transition: all 0.4s;
  text-align: center;
}
.userChangeBox i {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 26px;
  transition: all 0.2s;
  z-index: 120;
}
.userChangeBox i:hover {
  color: red;
}
.userChangeBox button {
  width: 130px;
  height: 40px;
  font-size: 20px;
  border-radius: 30px;
  margin-top: 40px;
  background-color: rgb(254, 199, 31);
  cursor: pointer;
}
.appear-enter-active,
.appear-leave-active {
  transition: all 0.5s;
}
.appear-enter,
.appear-leave-to {
  opacity: 0;
}
</style>